import React from 'react';

import bgImg from '../images/adabg-02-02.png';
import topImg from '../images/ada_header.png';
import i20150202Img from '../images/2015.png';
import i20160202Img from '../images/2016.png';
import i20170202Img from '../images/2017.png';
import i20180202Img from '../images/2018.png';
import i20190202Img from '../images/2019.png';
import i20200202Img from '../images/2020.png';
import i20210202Img from '../images/more.png';
import imiddle_lineImg from '../images/middle_line.png';
import Channels from '../components/channels';
import { hashHistory } from 'react-router';
import { connect } from 'react-redux';

import { conference ,initConference} from '../actions/conference';

const Height = 2226;
const Width = 1333;

class ADAPage extends React.Component {

    constructor() {
        super();
        this.state = {
            id: "",
            year: ""
        }
    }

    orientationChange() {
        this.forceUpdate();
    }

    componentDidMount() {
        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.orientationChange.bind(this), false); 
    }

    componentWillUnmount() {
        window.removeEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.orientationChange.bind(this), false); 
    }

    displayChannels(e, id, year) {
        let allButton = document.querySelectorAll(".easdchannel") || [];
        for(let i = 0; i< allButton.length; i++) {
            if (allButton[i].style.display == "block" && allButton[i].id!=(id+year)) 
                allButton[i].style.display = "none";
        }
        this.props.initConference();
        this.props.conference(id, year);
        this.setState({
            id: id,
            year: year
        });
        let targetDiv = document.getElementById(id+year);
        if (targetDiv != null )
            if (targetDiv.style.display == "none") {
                targetDiv.style.display = "block";
                const heightSize = Math.max(Height * widthSize,document.body.scrollHeight) ;
                let parentDiv = document.getElementById('conference');
                parentDiv.style.height = heightSize + "px";
            } else {
                targetDiv.style.display = "none";
                const heightSize = Math.max(Height * widthSize,document.body.clientHeight) ;
                let parentDiv = document.getElementById('conference');
                parentDiv.style.height = heightSize + "px";
            }
    }

    handleSwitchChannel(channelId) {
        hashHistory.push('conference/list/'+channelId+'/1');
    }

    copyTo(oldObj, newObj) {
        for (var key in newObj) {
            oldObj[key] = typeof newObj[key]==='object'? copyTo(newObj[key]): newObj[key];
        } 
        return oldObj; 
    }

    render() {

        const widthSize = document.body.clientWidth / Width;
        const heightSize = Math.max(Height * widthSize,document.body.clientHeight) ;    
        const topLogo      = 415 * widthSize;
        const year2015 = 331 * widthSize;
        const year2016 = 429 * widthSize;
        const year2017 = 240 * widthSize;
        const year2018 = 338 * widthSize;
        const year2019 = 233 * widthSize;
        const year2020 = 335 * widthSize;
        const year2021 = 173 * widthSize;

        let fontSize = document.body.clientWidth > 414?16:12;

        let offsetObjBase = {};
        let topH = 20;
        let lineH = (document.body.clientHeight - 20 - topLogo );
        offsetObjBase.btn2015H = (topH + topLogo) ;
        offsetObjBase.btn2016H = (offsetObjBase.btn2015H + year2015 - year2016/2) ;
        offsetObjBase.btn2017H = (offsetObjBase.btn2016H + year2016 ) ;
        offsetObjBase.btn2018H = (offsetObjBase.btn2017H + year2017 - year2018/2) ;
        offsetObjBase.btn2019H = (offsetObjBase.btn2018H + year2018 ) ;
        offsetObjBase.btn2020H = (offsetObjBase.btn2019H + year2019 - year2020/2) ;
        offsetObjBase.btn2021H = (offsetObjBase.btn2020H + year2020 ) ;

        let channels=this.props.channels;
        let styles = {};
       
        if (channels) {
            let line = channels.length/4 > 1 ? channels.length/4 : 1;
            styles = {
                channels: {
                    height: (fontSize * 8.5 * line) + "px",
                },
                channel: {
                    width:"calc(100% / 4)", 
                    float: "left", 
                    textAlign:"center", 
                    paddingTop: "0.5rem"
                },
                channelImg: {
                    backgroundSize: "4rem 4rem",
                    width:"4rem",
                    height:"4rem",
                    margin:"auto",
                    borderRadius:"50%"
                }
            }
        }
        let needAutoLayout = 0;
        let allButton = document.querySelectorAll(".easdchannel") || [];
        for(let i = 0; i< allButton.length && this.props.channels; i++) {
            if (allButton[i].style.display == "block") {
                let line = this.props.channels.length/4 > 1 ? this.props.channels.length/4 : 1;
                needAutoLayout = (fontSize * 10 * line) ;
            }
        }
        let offsetObj = this.copyTo({},offsetObjBase);
        console.log(needAutoLayout);
        if (needAutoLayout > 0) {
            for (let key in offsetObj) {
                if ( key > "btn"+this.state.year+"H") {
                    offsetObj[key] = offsetObj[key] +  needAutoLayout;
                }
            }
        } 

        return(
                <div id="conference" style={{backgroundImage:"url("+bgImg+")",backgroundSize:"100% 100%",top: "0px",position: "absolute", maxHeight:document.body.scrollHeight}}>
                    <div>
                        <img src={topImg} style={{width:"100%",height:"100%",display:"block",marginTop:topH}}/>
                    </div>
                    <div style={{backgroundImage:"url("+imiddle_lineImg+")",backgroundSize:"100% 100%",height:lineH+needAutoLayout}}>
                        <div onTouchStart={(e) => this.displayChannels(e,"ADA","2015")} style={{width:"52%",backgroundImage:"url("+i20150202Img+")",height:year2015, backgroundSize: "cover"}}>
                            
                        </div>
                        <div className="easdchannel" id="ADA2015" style={{zIndex: "999", top:offsetObj.btn2015H+year2015, display: "none", position: "absolute", backgroundColor: "#fff", float: "left", width: "100%" }}>
                            <Channels styles={styles} channels={ channels } handleSwitchChannel={this.handleSwitchChannel.bind(this) }/>
                        </div>
                        <div onTouchStart={(e) => this.displayChannels(e,"ADA","2016")} style={{width:"52%",backgroundImage:"url("+i20160202Img+")",height:year2016, backgroundSize: "cover",position: "absolute",right: "0px",backgroundPosition: "100% 100%",top:offsetObj.btn2016H}}>
                        </div>
                        <div className="easdchannel" id="ADA2016" style={{ zIndex: "999",top:offsetObj.btn2016H+year2016,display: "none", position: "absolute", backgroundColor: "#fff", float: "left", width: "100%" }}>
                            <Channels styles={styles} channels={ channels } handleSwitchChannel={this.handleSwitchChannel.bind(this) }/>
                        </div>
                         <div style={{width:"52%",backgroundImage:"url("+i20170202Img+")",height:year2017, backgroundSize: "cover",position: "absolute",top:offsetObj.btn2017H}}>
                        </div>
                        <div  style={{width:"52%",backgroundImage:"url("+i20180202Img+")",height:year2018, backgroundSize: "cover",position: "absolute",right: "0px",backgroundPosition: "100% 100%",top:offsetObj.btn2018H}}>
                            
                        </div>
                        <div style={{width:"52%",backgroundImage:"url("+i20190202Img+")",height:year2019, backgroundSize: "cover",position: "absolute",top:offsetObj.btn2019H}}>

                        </div>
                        <div style={{width:"52%",backgroundImage:"url("+i20200202Img+")",height:year2020, backgroundSize: "cover",position: "absolute",right: "0px",backgroundPosition: "100% 100%",top:offsetObj.btn2020H}}>
                            
                        </div>
                        <div style={{width:"52%",backgroundImage:"url("+i20210202Img+")",height:year2021, backgroundSize: "cover",position: "absolute",top:offsetObj.btn2021H}}>
                            
                        </div>                        
                    </div>
                </div>
            
            )
    }
}

function mapStateToProps(state){
    return { 
        channels: state.conference.channels
    };
}

export default connect(mapStateToProps, { conference ,initConference})(ADAPage);